<template>
    <el-row class="edit">
        <el-container style="height: 100%;">
            <el-header height="60px">
                <el-row>
                    为用户分配角色和安全组
                </el-row>
                <el-row>
                    当前选中用户为：
                    <el-tag type="success" v-model="user.name">
                        {{ (user.name && user.name.length > 0) ? user.name : "无"}}
                    </el-tag>
                </el-row>
            </el-header>
            <el-main>
                <el-row type="flex" justify="space-around" style="padding: 15px 0;">
                    <el-transfer
                            v-model="rolesUuids"
                            :data="roles"
                            :titles="['未分配角色','已分配角色']"
                            filterable
                            @change="roleChange"
                            :props="comProps"
                    ></el-transfer>
                </el-row>
                <el-row type="flex" justify="space-around" style="padding: 15px 0;">
                    <el-transfer
                            v-model="secgsUuids"
                            :data="secgs"
                            :titles="['未分配安全组','已分配安全组']"
                            filterable
                            @change="secgChange"
                            :props="comProps"
                    ></el-transfer>
                </el-row>
            </el-main>
            <el-footer height="80px">
                <el-row style="height: 20px;margin-bottom: 5px;">
                    <transition name="el-zoom-in-bottom">
                        <el-row v-show="infoShow" style="display: flex;justify-content: center;align-items: center;">
                            {{ (info !== '') ? "提示信息："+info : ''}}
                        </el-row>
                    </transition>
                </el-row>

                <el-row style="display: flex;justify-content: center;align-items: center;">
                    <el-button @click="editOut" size="mini"
                               style="width: 100px;border:1px solid rgba(220,220,220,1);border-radius: 30px;">
                        返回
                    </el-button>
                </el-row>
            </el-footer>
        </el-container>
    </el-row>
</template>

<script>
    import {getDataForSP, writePageInfo} from "../../../utils/webUtils.js";

    export default {
        name: "allocationsUser",
        data() {
            return {
                formAlignLeft: 'left',
                uuid: this.userUuid,
                user: {},
                roles: [],
                rolesUuids: [],
                secgs: [],
                secgsUuids: [],
                comProps: {
                    key: "uuid",
                    label: "name"
                },
                comPage: {
                    pageSize: 99999,//每页显示条目个数
                    currentPage: 1,//当前页数
                    totalElements: 0,
                    searchData: {}
                },
                info: '',
                infoShow: false
            }
        },
        props: {
            userUuid: {
                type: String
            }
        },
        //深度监听父组件的props传值
        watch: {
            userUuid(val) {
                this.uuid = val;
                this.queryUser();
                this.queryRole();
                this.queryUserRole();
                this.querySecg();
                this.queryUserSecg();
            },
            other: {
                //深度观察对象
                handler(val) {
                },
                deep: true
            }
        },
        mounted() {
            this.queryUser();
            this.queryRole();
            this.queryUserRole();
            this.querySecg();
            this.queryUserSecg();
        },
        methods: {
            queryUser() {
                this.axios.request({
                    method: "get",
                    url: "./kwp/kdi/user/" + this.uuid,
                    headers: {},
                    params: {}
                }).then(response => {
                    this.user = response.data;
                }).catch(error => {
                    console.log(error);
                });
            },
            //获取用户的角色
            queryUserRole() {
                this.axios.request({
                    method: "get",
                    url: "./kwp/kdi/user/" + this.uuid + "/role",
                    params: getDataForSP(this.comPage)
                }).then(response => {
                    this.rolesUuids = [];
                    for (let res of response.data) {
                        this.rolesUuids.push(res.uuid);
                    }
                }).catch(error => {
                    console.log(error);
                });
            },
            //获取全量角色
            queryRole() {
                this.axios.request({
                    method: "get",
                    url: "./kwp/kdi/role/search/findAll",
                    params: getDataForSP(this.comPage)
                }).then(response => {
                    //全量资源
                    this.roles = response.data.content;
                }).catch(error => {
                    console.log(error);
                });
            },
            //穿梭框元素变化时触发
            roleChange(currentValues, direction, movedValues) {
                console.log(currentValues, direction, movedValues);
                //currentValues 当前框的数值 ； direction 转移的方向 ；movedValues  移动的数值
                //direction = right 为 添加 ；direction = left 为 移除
                if (direction === "right") {
                    let resUuidArray = [];
                    for (let x = 0; x <= movedValues.length; x++) {
                        resUuidArray.push(movedValues[x]);
                    }
                    this.axios.request({
                        method: "post",
                        url: "./kwp/kdi/user/" + this.user.uuid + "/role",
                        headers: {
                            "Content-Type": "application/x-www-form-urlencoded"
                        },
                        data: this.qs.stringify({
                            roleUuids: resUuidArray
                        }, {arrayFormat: 'brackets'})
                    }).then(response => {
                        this.info = '分配角色成功';
                        this.infoShow = true;
                        setTimeout(() => {
                            this.infoShow = false;
                            this.info = '';
                        }, 1600);
                    }).catch(error => {
                        console.log(error);
                    });
                } else {
                    for (let x = 0; x <= movedValues.length; x++) {
                        this.axios.request({
                            method: "delete",
                            url: "./kwp/kdi/user/" + this.uuid + "/role/" + movedValues[x],
                            headers: {},
                            data: {}
                        }).then(response => {
                            this.info = '移除角色成功';
                            this.infoShow = true;
                            setTimeout(() => {
                                this.infoShow = false;
                                this.info = '';
                            }, 1600);
                        }).catch(error => {
                            console.log(error);
                        });
                    }

                }
            },
            //获取用户的安全组
            queryUserSecg() {
                this.axios.request({
                    method: "get",
                    url: "./kwp/kdi/user/" + this.uuid + "/secg",
                    params: getDataForSP(this.comPage)
                }).then(response => {
                    this.secgsUuids = [];
                    for (let res of response.data) {
                        this.secgsUuids.push(res.uuid);
                    }
                }).catch(error => {
                    console.log(error);
                });
            },
            //获取全量安全组
            querySecg() {
                this.axios.request({
                    method: "get",
                    url: "./kwp/kdi/secg/search/findAll",
                    params: getDataForSP(this.comPage)
                }).then(response => {
                    //全量资源
                    this.secgs = response.data.content;
                }).catch(error => {
                    console.log(error);
                });
            },
            //穿梭框元素变化时触发
            secgChange(currentValues, direction, movedValues) {
                //currentValues 当前框的数值 ； direction 转移的方向 ；movedValues  移动的数值
                //direction = right 为 添加 ；direction = left 为 移除
                if (direction === "right") {
                    let resUuidArray = [];
                    for (let x = 0; x <= movedValues.length; x++) {
                        resUuidArray.push(movedValues[x]);
                    }
                    this.axios.request({
                        method: "post",
                        url: "./kwp/kdi/user/" + this.user.uuid + "/secg",
                        headers: {
                            "Content-Type": "application/x-www-form-urlencoded"
                        },
                        data: this.qs.stringify({
                            secgUuids: resUuidArray
                        }, {arrayFormat: 'brackets'})
                    }).then(response => {
                        this.info = '分配安全组成功';
                        this.infoShow = true;
                        setTimeout(() => {
                            this.infoShow = false;
                            this.info = '';
                        }, 1600);
                    }).catch(error => {
                        console.log(error);
                    });
                } else {
                    for (let x = 0; x <= movedValues.length; x++) {
                        this.axios.request({
                            method: "delete",
                            url: "./kwp/kdi/user/" + this.user.uuid + "/secg/" + movedValues[x],
                            headers: {},
                            data: {}
                        }).then(response => {
                            this.info = '移除安全组成功';
                            this.infoShow = true;
                            setTimeout(() => {
                                this.infoShow = false;
                                this.info = '';
                            }, 1600);
                        }).catch(error => {
                            console.log(error);
                        });
                    }

                }
            },
            editOut() {
                this.infoShow = false;
                this.info = '';
                this.$emit("editState", false);
            }
        }
    }
</script>

<style scoped>
    .edit {
        width: 600px;
        height: 100%;
        z-index: 100;
    }


</style>